@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/addons/Theme/register.js

@@ -1,590 +0,0 @@
-/* eslint-disable */
-// your-addon-register-file.js
-import React from 'react'
-import { addons, types } from '@storybook/addons'
-
-import { useGlobals, useParameter } from '@storybook/api'
-import { AddonPanel, Placeholder, Spaced } from '@storybook/components'
-
-import alice from '../../theming/themes/alice.theme'
-import loadsmart, {
-  BORDER_RADIUSES,
-  BORDER_WIDTHS,
-  COLORS,
-  FONT_FAMILIES,
-  FONT_SIZES,
-  FONT_WEIGHTS,
-  OPACITIES,
-  SHADOWS,
-  SPACINGS,
-} from '../../theming/themes/loadsmart.theme'
-import miranda from '../../theming/themes/miranda-compatibility.theme'
-
-const THEMES = { alice, loadsmart, miranda }
-
-const TOKEN_PARAM_KEY = 'tokenPrefix'
-
-const HEADER_STYLE = {
-  fontSize: '13px',
-  fontWeight: 600,
-  margin: '10px 20px',
-  padding: '5px 0px',
-  borderBottom: '1px solid #E9EBEC',
-}
-
-const THEME_PILL_STYLE = {
-  alignItems: 'center',
-  background: 'rgb(197, 250, 210)',
-  borderRadius: 12,
-  color: 'rgb(17, 128, 67)',
-  display: 'inline-flex',
-  fontWeight: 'normal',
-  height: 24,
-  justifyContent: 'center',
-  padding: '5px 10px',
-}
-
-const TABLE_STYLE = {
-  display: 'flex',
-  flexDirection: 'column',
-  margin: '0 20px',
-}
-
-const ROW_STYLE = {
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  borderBottom: '1px dotted #E9EBEC',
-  fontSize: 12,
-}
-
-const CELL_STYLE = {
-  height: 36,
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  flex: '1 0 auto',
-}
-
-const TOKEN_CELL_STYLE = {
-  flex: '0 0 20%',
-}
-
-const TOKEN_STYLE = {
-  color: '#3b4751',
-  display: 'inline-block',
-  fontWeight: 600,
-  textAlign: 'left',
-  padding: '0 20px 0 0',
-}
-
-const VALUE_STYLE = {
-  flex: '0 0 50%',
-  fontFamily: 'monospace',
-  padding: '0 0 0 20px',
-  margin: '0 10px 0 0',
-}
-
-const VALUE_CONTAINER_STYLE = { display: 'flex', alignItems: 'center', flex: '1 1 auto' }
-
-const COPY_STYLE = {
-  cursor: 'pointer',
-  height: 24,
-  margin: '0 10px',
-  textTransform: 'uppercase',
-}
-
-const ThemePanel = (props) => {
-  const [{ theme }] = useGlobals()
-  const tokenPrefix = useParameter(TOKEN_PARAM_KEY, [])
-
-  return (
-    <AddonPanel {...props}>
-      {theme ? (
-        <Spaced row={3} outer={1}>
-          <h1 style={HEADER_STYLE}>
-            Component tokens for theme <span style={THEME_PILL_STYLE}>{theme}</span>
-          </h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(alice)
-              .filter((token) => token.startsWith(tokenPrefix))
-              .map((token) => {
-                const value = THEMES[theme][token] ?? 'NOT FOUND!'
-
-                return (
-                  <div key={token} style={ROW_STYLE}>
-                    <div>
-                      <button
-                        type="button"
-                        style={COPY_STYLE}
-                        onClick={() => {
-                          navigator?.clipboard.writeText(String(token))
-                        }}
-                      >
-                        &#10064; token
-                      </button>
-                      <button
-                        type="button"
-                        style={COPY_STYLE}
-                        onClick={() => {
-                          navigator?.clipboard?.writeText(String(value))
-                        }}
-                      >
-                        &#10064; value
-                      </button>
-                    </div>
-                    <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                      <span style={TOKEN_STYLE}>{token}</span>
-                    </div>
-                    <div style={CELL_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                    </div>
-                  </div>
-                )
-              })}
-          </div>
-          <h1 style={HEADER_STYLE}>Color tokens</h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(COLORS).map((token) => {
-              const value = THEMES[theme][token]
-
-              return (
-                <div key={token} style={ROW_STYLE}>
-                  <div>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard.writeText(String(token))
-                      }}
-                    >
-                      &#10064; token
-                    </button>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard?.writeText(String(value))
-                      }}
-                    >
-                      &#10064; value
-                    </button>
-                  </div>
-                  <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                    <span style={TOKEN_STYLE}>{token}</span>
-                  </div>
-                  <div style={CELL_STYLE}>
-                    <div style={VALUE_CONTAINER_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                      <span
-                        style={{
-                          display: 'inline-block',
-                          height: 24,
-                          width: 24,
-                          backgroundColor: value,
-
-                          border: '1px solid #3b4751',
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-          <h1 style={HEADER_STYLE}>Opacity tokens</h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(OPACITIES).map((token) => {
-              const value = THEMES[theme][token]
-
-              return (
-                <div key={token} style={ROW_STYLE}>
-                  <div>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard.writeText(String(token))
-                      }}
-                    >
-                      &#10064; token
-                    </button>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard?.writeText(String(value))
-                      }}
-                    >
-                      &#10064; value
-                    </button>
-                  </div>
-                  <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                    <span style={TOKEN_STYLE}>{token}</span>
-                  </div>
-                  <div style={CELL_STYLE}>
-                    <div style={VALUE_CONTAINER_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                      <span
-                        style={{
-                          display: 'inline-block',
-                          height: 24,
-                          width: 24,
-                          backgroundColor: `rgba(49, 51, 54, ${value})`,
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-          <h1 style={HEADER_STYLE}>Spacing tokens</h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(SPACINGS).map((token) => {
-              const value = THEMES[theme][token]
-
-              return (
-                <div key={token} style={ROW_STYLE}>
-                  <div>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard.writeText(String(token))
-                      }}
-                    >
-                      &#10064; token
-                    </button>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard?.writeText(String(value))
-                      }}
-                    >
-                      &#10064; value
-                    </button>
-                  </div>
-                  <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                    <span style={TOKEN_STYLE}>{token}</span>
-                  </div>
-                  <div style={CELL_STYLE}>
-                    <div style={VALUE_CONTAINER_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                      <span
-                        style={{
-                          display: 'inline-block',
-                          height: 24,
-                          width: value,
-                          backgroundColor: '#313336',
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-          <h1 style={HEADER_STYLE}>Font family tokens</h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(FONT_FAMILIES).map((token) => {
-              const value = THEMES[theme][token]
-
-              return (
-                <div key={token} style={ROW_STYLE}>
-                  <div>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard.writeText(String(token))
-                      }}
-                    >
-                      &#10064; token
-                    </button>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard?.writeText(String(value))
-                      }}
-                    >
-                      &#10064; value
-                    </button>
-                  </div>
-                  <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                    <span style={TOKEN_STYLE}>{token}</span>
-                  </div>
-                  <div style={CELL_STYLE}>
-                    <div style={VALUE_CONTAINER_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                      <span
-                        style={{
-                          display: 'inline-block',
-                          height: 24,
-                          width: value,
-                          backgroundColor: '#313336',
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-
-          <h1 style={HEADER_STYLE}>Font size tokens</h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(FONT_SIZES).map((token) => {
-              const value = THEMES[theme][token]
-
-              return (
-                <div key={token} style={ROW_STYLE}>
-                  <div>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard.writeText(String(token))
-                      }}
-                    >
-                      &#10064; token
-                    </button>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard?.writeText(String(value))
-                      }}
-                    >
-                      &#10064; value
-                    </button>
-                  </div>
-                  <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                    <span style={TOKEN_STYLE}>{token}</span>
-                  </div>
-                  <div style={CELL_STYLE}>
-                    <div style={VALUE_CONTAINER_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                      <span
-                        style={{
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                          height: 24,
-                          fontFamily: "'Manrope', sans-serif",
-                          fontSize: value,
-                        }}
-                      >
-                        ABCabc
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-
-          <h1 style={HEADER_STYLE}>Font weight tokens</h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(FONT_WEIGHTS).map((token) => {
-              const value = THEMES[theme][token]
-
-              return (
-                <div key={token} style={ROW_STYLE}>
-                  <div>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard.writeText(String(token))
-                      }}
-                    >
-                      &#10064; token
-                    </button>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard?.writeText(String(value))
-                      }}
-                    >
-                      &#10064; value
-                    </button>
-                  </div>
-                  <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                    <span style={TOKEN_STYLE}>{token}</span>
-                  </div>
-                  <div style={CELL_STYLE}>
-                    <div style={VALUE_CONTAINER_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-
-          <h1 style={HEADER_STYLE}>Shadow tokens</h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(SHADOWS).map((token) => {
-              const value = THEMES[theme][token]
-
-              return (
-                <div key={token} style={ROW_STYLE}>
-                  <div>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard.writeText(String(token))
-                      }}
-                    >
-                      &#10064; token
-                    </button>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard?.writeText(String(value))
-                      }}
-                    >
-                      &#10064; value
-                    </button>
-                  </div>
-                  <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                    <span style={TOKEN_STYLE}>{token}</span>
-                  </div>
-                  <div style={CELL_STYLE}>
-                    <div style={VALUE_CONTAINER_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                      <span
-                        style={{
-                          display: 'inline-block',
-                          height: 24,
-                          width: 24,
-                          boxShadow: value,
-                          backgroundColor: '#313336',
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-
-          <h1 style={HEADER_STYLE}>Border radius tokens</h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(BORDER_RADIUSES).map((token) => {
-              const value = THEMES[theme][token]
-
-              return (
-                <div key={token} style={ROW_STYLE}>
-                  <div>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard.writeText(String(token))
-                      }}
-                    >
-                      &#10064; token
-                    </button>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard?.writeText(String(value))
-                      }}
-                    >
-                      &#10064; value
-                    </button>
-                  </div>
-                  <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                    <span style={TOKEN_STYLE}>{token}</span>
-                  </div>
-                  <div style={CELL_STYLE}>
-                    <div style={VALUE_CONTAINER_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                      <span
-                        style={{
-                          display: 'inline-block',
-                          height: 24,
-                          width: 24,
-                          borderRadius: value,
-                          backgroundColor: '#313336',
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-
-          <h1 style={HEADER_STYLE}>Border width tokens</h1>
-          <div style={TABLE_STYLE}>
-            {Object.keys(BORDER_WIDTHS).map((token) => {
-              const value = THEMES[theme][token]
-
-              return (
-                <div key={token} style={ROW_STYLE}>
-                  <div>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard.writeText(String(token))
-                      }}
-                    >
-                      &#10064; token
-                    </button>
-                    <button
-                      type="button"
-                      style={COPY_STYLE}
-                      onClick={() => {
-                        navigator?.clipboard?.writeText(String(value))
-                      }}
-                    >
-                      &#10064; value
-                    </button>
-                  </div>
-                  <div style={{ ...CELL_STYLE, ...TOKEN_CELL_STYLE }}>
-                    <span style={TOKEN_STYLE}>{token}</span>
-                  </div>
-                  <div style={CELL_STYLE}>
-                    <div style={VALUE_CONTAINER_STYLE}>
-                      <code style={VALUE_STYLE}>{value}</code>
-                      <span
-                        style={{
-                          display: 'inline-block',
-                          height: 24,
-                          width: value,
-                          backgroundColor: '#313336',
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        </Spaced>
-      ) : (
-        <Placeholder>No theme selected</Placeholder>
-      )}
-    </AddonPanel>
-  )
-}
-
-const ADDON_ID = 'ls-theme'
-const PANEL_ID = `${ADDON_ID}/panel`
-
-addons.register(ADDON_ID, () => {
-  addons.add(PANEL_ID, {
-    type: types.PANEL,
-    title: 'Theme',
-    render: ThemePanel,
-  })
-})

package/src/common/BackButton/BackButton.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import { IconButton } from 'components/Button'
-import { Icon } from 'components/Icon'
-
-import type { ButtonProps } from 'components/Button'
-
-export type BackButtonProps = Omit<ButtonProps, 'children'>
-
-function BackButton({ scale = 'small', ...others }: BackButtonProps): JSX.Element {
-  return (
-    <IconButton scale={scale} {...others}>
-      <Icon name="back" size={16} />
-    </IconButton>
-  )
-}
-
-export default BackButton

package/src/common/BackButton/index.ts

@@ -1,2 +0,0 @@
-export { default } from './BackButton'
-export type { BackButtonProps } from './BackButton'

package/src/common/CloseButton/CloseButton.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { BaseButton } from 'components/Button'
-import { getToken as token } from 'theming'
-import { Icon } from 'components/Icon'
-import conditional, { whenProps } from 'tools/conditional'
-import focusable from 'styles/focusable'
-
-import type { ButtonProps } from 'components/Button'
-
-export interface CloseButtonProps extends ButtonProps {
-  size?: string | number
-}
-
-const Button = styled(BaseButton)`
-  border: none;
-  border-radius: ${token('border-radius-circle')};
-
-  color: ${token('color-neutral-darker')};
-
-  background: ${token('color-transparent')};
-
-  padding: ${token('space-xs')};
-
-  font-size: ${token('font-size-3')};
-
-  /*
-   * button height is set in the BaseButton component
-   * we set width here to ensure a perfectly rounded button
-   */
-  width: ${conditional({
-    'button-height': whenProps({ scale: 'default' }),
-    'button-small-height': whenProps({ scale: 'small' }),
-    'button-large-height': whenProps({ scale: 'large' }),
-  })};
-
-  ${focusable`
-    box-shadow: ${token('button-icon-box-shadow')};
-
-    outline: ${token('button-icon-outline')};
-    outline-offset: ${token('button-outline-offset')};
-  `}
-`
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function CloseButton({ scale = 'small', size = 16, ...others }: CloseButtonProps): JSX.Element {
-  return (
-    <Button scale={scale} {...others}>
-      <Icon name="close" size={size} />
-    </Button>
-  )
-}
-
-export default CloseButton

package/src/common/CloseButton/index.ts

@@ -1,2 +0,0 @@
-export { default } from './CloseButton'
-export type { CloseButtonProps } from './CloseButton'