feat(components/primitive/linkBox): add new component

components/primitive/injector/demo/article/ArticleClassName.js

@@ -1,8 +1,8 @@
-import Injector from 'components/primitive/injector/src/index.js'
 import PropTypes from 'prop-types'
 
 import {Article, Box, H2, Paragraph} from '@s-ui/documentation-library'
 
+import Injector from '../../src/index.js'
 import Child from '../Child.js'
 
 const ArticleClassName = ({className}) => {

components/primitive/injector/demo/article/ArticleDefault.js

@@ -1,8 +1,8 @@
-import Injector from 'components/primitive/injector/src/index.js'
 import PropTypes from 'prop-types'
 
 import {Article, Box, H2, Paragraph} from '@s-ui/documentation-library'
 
+import Injector from '../../src/index.js'
 import Child from '../Child.js'
 
 const ArticleDefault = ({className}) => {

components/primitive/injector/demo/article/ArticleFragment.js

@@ -1,10 +1,10 @@
 import {Fragment} from 'react'
 
-import Injector from 'components/primitive/injector/src/index.js'
 import PropTypes from 'prop-types'
 
 import {Article, Box, H2, H3, Paragraph} from '@s-ui/documentation-library'
 
+import Injector from '../../src/index.js'
 import Child from '../Child.js'
 
 const ArticleFragment = ({className}) => {

components/primitive/injector/demo/article/ArticleHandlers.js

@@ -1,8 +1,8 @@
-import Injector from 'components/primitive/injector/src/index.js'
 import PropTypes from 'prop-types'
 
 import {Article, Box, H2, Paragraph} from '@s-ui/documentation-library'
 
+import Injector from '../../src/index.js'
 import Child from '../Child.js'
 
 const ArticleHandlers = ({className}) => {

components/primitive/injector/demo/article/ArticleProps.js

@@ -1,8 +1,8 @@
-import Injector from 'components/primitive/injector/src/index.js'
 import PropTypes from 'prop-types'
 
 import {Article, Box, H2, H3, Paragraph} from '@s-ui/documentation-library'
 
+import Injector from '../../src/index.js'
 import Child from '../Child.js'
 
 const ArticleProps = ({className}) => {

components/primitive/injector/demo/article/ArticleProviso.js

@@ -1,10 +1,10 @@
 import {Fragment} from 'react'
 
-import Injector from 'components/primitive/injector/src/index.js'
 import PropTypes from 'prop-types'
 
 import {Article, Box, Code, H2, Paragraph} from '@s-ui/documentation-library'
 
+import Injector from '../../src/index.js'
 import Child from '../Child.js'
 import OtherChild from '../OtherChild.js'
 

components/primitive/injector/demo/article/ArticleStyles.js

@@ -1,8 +1,8 @@
-import Injector from 'components/primitive/injector/src/index.js'
 import PropTypes from 'prop-types'
 
 import {Article, Box, H2, Paragraph} from '@s-ui/documentation-library'
 
+import Injector from '../../src/index.js'
 import Child from '../Child.js'
 
 const ArticleStyles = ({className}) => {

components/primitive/linkBox/.gitignore

@@ -0,0 +1,2 @@
+lib
+node_modules

components/primitive/linkBox/.npmignore

@@ -0,0 +1,6 @@
+assets
+demo
+src
+test
+node_modules
+CHANGELOG.md

components/primitive/linkBox/README.md

@@ -0,0 +1,39 @@
+# PrimitiveLinkBox
+
+> Description
+
+[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/primitive/linkBox/)
+[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,primitive,linkBox)
+[![npm](https://img.shields.io/npm/dt/%40s-ui/react-primitive-link-box?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-primitive-link-box)
+
+[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AlinkBox&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AlinkBox)
+[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-primitive-link-box)](https://github.com/SUI-Components/sui-components/blob/main/components/primitive/linkBox/LICENSE.md)
+
+## Installation
+
+```sh
+$ npm install @s-ui/react-primitive-link-box
+```
+
+## Usage
+
+### Basic usage
+
+#### Import package and use the component
+
+```js
+import PrimitiveLinkBox from '@s-ui/react-primitive-link-box'
+
+return (<PrimitiveLinkBox />)
+```
+
+#### Import the styles (Sass)
+
+```css
+@import '~@s-ui/theme/lib/index';
+/* @import 'your theme'; */
+@import '~@s-ui/react-primitive-link-box/lib/index';
+```
+
+
+> **Find full description and more examples in the [demo page](#).**

components/primitive/linkBox/demo/article/ArticleA11y.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+
+import {Anchor, Article, Box, H2, Paragraph, Strong} from '@s-ui/documentation-library'
+
+const ArticleA11y = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2>
+        Accessibility –{' '}
+        <Anchor href="https://github.com/SUI-Components/sui-components/blob/master/contributor-docs/Accessibility%20Standards.md">
+          <Strong>Guidelines</Strong>
+        </Anchor>
+      </H2>
+      <Box style={{backgroundColor: 'color-mix(in srgb, #00FF00 10%, transparent)'}}>
+        <Paragraph>
+          ✅ This component has been successfully tested for{' '}
+          <Strong>WCAG 2.0 levels A and AA, WCAG 2.1 levels A and AA</Strong> and for common accessibility best
+          practices.
+        </Paragraph>
+      </Box>
+    </Article>
+  )
+}
+
+ArticleA11y.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleA11y

components/primitive/linkBox/demo/article/ArticleDefault.js

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types'
+
+import {Anchor, Article, Box, Code, H1, H2, H4, Paragraph, Separator} from '@s-ui/documentation-library'
+
+import PrimitiveLinkBox, {PrimitiveLinkBoxLink} from '../../src/index.js'
+
+const ArticleDefault = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2 id="default">Default</H2>
+      <Paragraph>
+        Simply wrapping an entire component in an <Code>a</Code> tag may seem convenient for linking, but it's
+        considered un-semantic and incorrect. This is because the component might include other clickable elements like
+        tags, timestamps, or buttons.
+      </Paragraph>
+      <Paragraph>
+        This can be solved by wrapping all clickable area in a <Code>PrimitiveLinkBox</Code> component and adding the
+        call-to-action element into a <Code>PrimitiveLinkBoxLink</Code>.
+      </Paragraph>
+      <PrimitiveLinkBox>
+        <Box
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: 300,
+            backgroundImage: 'linear-gradient(40deg, var(--c-primary) 0%, var(--c-accent)',
+            boxShadow: '0px 4px 8px 0px color-mix(in srgb, var(--c-gray) 70%, transparent)'
+          }}
+        >
+          <H4 as="div" style={{color: 'var(--c-base)'}}>
+            Passed Event
+          </H4>
+          <img src="https://placehold.co/150x85" alt="placeholder" style={{aspectRatio: '16 / 9'}} />
+          <H1 as="span">
+            <PrimitiveLinkBoxLink>
+              <Anchor href="#default" style={{color: 'var(--c-base)'}}>
+                WWDC
+              </Anchor>
+            </PrimitiveLinkBoxLink>
+          </H1>
+          <H2 as="div" style={{color: 'var(--c-base)'}}>
+            Worldwide Developers Conference
+          </H2>
+          <Separator />
+          <Paragraph style={{color: 'var(--c-base)'}}>22 June 2021</Paragraph>
+        </Box>
+      </PrimitiveLinkBox>
+    </Article>
+  )
+}
+ArticleDefault.displayName = 'ArticleDefault'
+
+ArticleDefault.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleDefault

components/primitive/linkBox/demo/article/ArticleNesting.js

@@ -0,0 +1,86 @@
+import {calendarIcon, eyeIcon} from '@s-ui/react-atom-tag-demo/settings'
+import AtomTag, {atomTagColors, atomTagDesigns, atomTagSizes} from '@s-ui/react-atom-tag/src'
+import PropTypes from 'prop-types'
+
+import {Anchor, Article, Box, Code, H1, H2, H4, Paragraph, Separator} from '@s-ui/documentation-library'
+
+import PrimitiveLinkBox, {PrimitiveLinkBoxLink, PrimitiveLinkBoxRaised} from '../../src/index.js'
+
+const ArticleNesting = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2 id="nesting">Nesting</H2>
+      <Paragraph>
+        If your linkbox contains interactive elements inside of it, wrap them with a <Code>PrimitiveLinkBoxRaised</Code>
+        . It will raise their z-index to stay above the main action of you<Code>PrimitiveLinkBoxRaised</Code>.
+      </Paragraph>
+      <PrimitiveLinkBox>
+        <Box
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: 300,
+            backgroundImage: 'linear-gradient(40deg, var(--c-primary) 0%, var(--c-accent)',
+            boxShadow: '0px 4px 8px 0px color-mix(in srgb, var(--c-gray) 70%, transparent)'
+          }}
+        >
+          <H4 as="div" style={{color: 'var(--c-base)'}}>
+            Passed Event
+          </H4>
+          <div style={{position: 'relative', width: '100%', aspectRatio: '16 / 9'}}>
+            <img src="https://placehold.co/150x85" alt="placeholder" style={{aspectRatio: '16 / 9', width: '100%'}} />
+            <PrimitiveLinkBoxRaised>
+              <AtomTag
+                style={{position: 'absolute', bottom: 8, right: 8}}
+                label="category"
+                size={atomTagSizes.XSMALL}
+                design={atomTagDesigns.TINTED}
+                color={atomTagColors.PRIMARY}
+                onClick={() => console.log('go to category')}
+              />
+            </PrimitiveLinkBoxRaised>
+          </div>
+          <H1 as="span">
+            <PrimitiveLinkBoxLink>
+              <Anchor href="#nesting" style={{color: 'var(--c-base)'}}>
+                WWDC
+              </Anchor>
+            </PrimitiveLinkBoxLink>
+          </H1>
+          <H2 as="div" style={{color: 'var(--c-base)'}}>
+            Worldwide Developers Conference
+          </H2>
+          <Separator />
+          <Paragraph style={{color: 'var(--c-base)'}}>22 June 2021</Paragraph>
+          <div style={{display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 16}}>
+            <PrimitiveLinkBoxRaised>
+              <AtomTag
+                label="Add to iCal"
+                icon={calendarIcon}
+                design={atomTagDesigns.OUTLINE}
+                color={atomTagColors.SURFACE}
+                onClick={() => console.log('Add to iCal')}
+              />
+            </PrimitiveLinkBoxRaised>
+            <PrimitiveLinkBoxRaised>
+              <AtomTag
+                label="Join the meet"
+                icon={eyeIcon}
+                design={atomTagDesigns.OUTLINE}
+                color={atomTagColors.SURFACE}
+                onClick={() => console.log('Join the meet')}
+              />
+            </PrimitiveLinkBoxRaised>
+          </div>
+        </Box>
+      </PrimitiveLinkBox>
+    </Article>
+  )
+}
+ArticleNesting.displayName = 'ArticleNesting'
+
+ArticleNesting.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleNesting

components/primitive/linkBox/demo/config.js

@@ -0,0 +1 @@
+export const demoBaseClassName = 'PrimitiveLinkBoxDemo'

components/primitive/linkBox/demo/index.js

@@ -0,0 +1,18 @@
+import {H1, Paragraph} from '@s-ui/documentation-library'
+
+import ArticleDefault from './article/ArticleDefault.js'
+import ArticleNesting from './article/ArticleNesting.js'
+import ArticleA11y from './article/ArticleA11y.js'
+import {demoBaseClassName} from './config.js'
+
+export default () => (
+  <div className="sui-StudioPreview">
+    <H1>LinkBox</H1>
+    <Paragraph>Semantic component used to wrap elements (cards, blog posts, articles, etc.) in a link.</Paragraph>
+    <ArticleDefault className={demoBaseClassName} />
+    <br />
+    <ArticleNesting className={demoBaseClassName} />
+    <br />
+    <ArticleA11y className={demoBaseClassName} />
+  </div>
+)

components/primitive/linkBox/demo/index.scss

@@ -0,0 +1,3 @@
+@import '~@s-ui/react-atom-tag/lib/index.scss';
+
+@import '../src/index.scss';

components/primitive/linkBox/demo/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@s-ui/react-primitive-link-box-demo",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Demo for @s-ui/react-primitive-link-box",
+  "dependencies": {
+    "@s-ui/react-atom-tag": "4"
+  }
+}

components/primitive/linkBox/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@s-ui/react-primitive-link-box",
+  "version": "1.0.0",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "@s-ui",
+    "react",
+    "component",
+    "primitive",
+    "linkbox"
+  ],
+  "main": "lib/index.js",
+  "scripts": {
+    "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles",
+    "build:js": "babel --presets sui ./src --out-dir ./lib",
+    "build:styles": "cpx './src/**/*.scss' ./lib"
+  },
+  "peerDependencies": {
+    "@s-ui/theme": "8"
+  },
+  "dependencies": {
+    "@s-ui/react-primitive-injector": "1",
+    "classnames": "2.5.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SUI-Components/sui-components",
+    "directory": "components/primitive/linkBox"
+  },
+  "config": {
+    "title": "linkbox",
+    "category": "primitive",
+    "type": "components"
+  },
+  "bugs": {
+    "url": "https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Component%3A+linkBox%22"
+  },
+  "homepage": "https://sui-components.vercel.app/",
+  "license": "MIT"
+}