From e0bcabef207414fc79c7e640697452c175e7b45b Mon Sep 17 00:00:00 2001 From: Anders Date: Tue, 14 Mar 2023 12:53:19 +0100 Subject: [PATCH] feat(Skeleton): removes style_type prop (#2095) --- .../src/docs/EUFEMIA_CHANGELOG.mdx | 1 + .../uilib/components/skeleton/properties.mdx | 1 - .../src/components/skeleton/Skeleton.d.ts | 6 -- .../src/components/skeleton/Skeleton.js | 9 --- .../__snapshots__/Skeleton.test.js.snap | 1 - .../skeleton/stories/Skeleton.stories.tsx | 24 +------ .../themes/dnb-skeleton-theme-norway.scss | 72 ------------------- .../themes/dnb-skeleton-theme-rainbow.scss | 40 ----------- .../style/themes/dnb-skeleton-theme-ui.scss | 7 +- .../skeleton/style/themes/norway.js | 6 -- .../skeleton/style/themes/rainbow.js | 6 -- .../stories/OtherElements.stories.tsx | 5 -- 12 files changed, 5 insertions(+), 173 deletions(-) delete mode 100644 packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-norway.scss delete mode 100644 packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-rainbow.scss delete mode 100644 packages/dnb-eufemia/src/components/skeleton/style/themes/norway.js delete mode 100644 packages/dnb-eufemia/src/components/skeleton/style/themes/rainbow.js diff --git a/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx b/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx index ac7f9ac7168..dc37dcf71f1 100644 --- a/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx +++ b/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx @@ -3,6 +3,7 @@ - [New major version 10](/uilib/about-the-lib/releases/eufemia/v10-info/) - New components released: - [SkipContent](/uilib/components/skip-content) +- Removed `style_type` property of [Skeleton](https://eufemia.dnb.no/uilib/components/skeleton) ## November, 22. 2022 diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx index 16c56e52eaf..b4ae4625cf1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx @@ -7,7 +7,6 @@ showTabs: true | Properties | Description | | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | `show` | _(optional)_ Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`. | -| `style_type` | _(optional)_ Defines the style type to use (`shine`). Defaults to `lines`. | | `figure` | _(optional)_ Define a figure to use, like `article`. The wrapped content will be hidden while the skeleton figure is shown. | | `no_animation` | _(optional)_ Use `true` to disable the animation. | | `aria_busy` | _(optional)_ Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed. | diff --git a/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts b/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts index bf7b270b0a4..5daa9596944 100644 --- a/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts +++ b/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import type { SpacingProps } from '../space/types'; export type SkeletonShow = boolean; -export type SkeletonStyleType = 'lines' | string; export type SkeletonFigure = | string | ((...args: any[]) => any) @@ -24,11 +23,6 @@ export interface SkeletonProps */ no_animation?: boolean; - /** - * Defines the style type to use (`shine`). Defaults to `lines`. - */ - style_type?: SkeletonStyleType; - /** * Define a figure to use, like `article`. The wrapped content will be hidden while the skeleton figure is shown. */ diff --git a/packages/dnb-eufemia/src/components/skeleton/Skeleton.js b/packages/dnb-eufemia/src/components/skeleton/Skeleton.js index ab0fafc8063..1ecf9bacaa7 100644 --- a/packages/dnb-eufemia/src/components/skeleton/Skeleton.js +++ b/packages/dnb-eufemia/src/components/skeleton/Skeleton.js @@ -26,10 +26,6 @@ export default class Skeleton extends React.PureComponent { static propTypes = { show: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - style_type: PropTypes.oneOfType([ - PropTypes.oneOf(['lines']), - PropTypes.string, - ]), figure: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -53,7 +49,6 @@ export default class Skeleton extends React.PureComponent { static defaultProps = { show: null, skeleton: null, // only to make sure we process extendPropsWithContextInClassComponent - style_type: null, no_animation: null, figure: null, aria_busy: null, @@ -85,7 +80,6 @@ export default class Skeleton extends React.PureComponent { Skeleton.defaultProps, { skeleton: context.Skeleton || context.skeleton, - style_type: context.skeleton_style_type, no_animation: context.skeleton_no_animation, }, context.getTranslation(props).Skeleton @@ -125,7 +119,6 @@ export default class Skeleton extends React.PureComponent { const { show, - style_type, no_animation, figure, skeleton, @@ -149,7 +142,6 @@ export default class Skeleton extends React.PureComponent { className: classnames( figure ? 'dnb-skeleton__figure' : 'dnb-skeleton__root', isTrue(showSkeleton) && 'dnb-skeleton', - showSkeleton && style_type && `dnb-skeleton--${style_type}`, isTrue(no_animation) && 'dnb-skeleton--no-animation', createSpacingClasses(props), className, @@ -179,7 +171,6 @@ export default class Skeleton extends React.PureComponent { ) : ( {children} diff --git a/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap b/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap index ed47662bf4f..760ba3b3ece 100644 --- a/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap +++ b/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap @@ -11,7 +11,6 @@ exports[`Skeleton component have to match snapshot 1`] = ` no_animation={null} show={null} skeleton={null} - style_type={null} > { // no_animation // show // figure={() => } - // style_type="shine" - // style_type="dots" - // style_type="norway" - // style_type="rainbow" - // style_type="brand" > @@ -301,13 +292,7 @@ export const SkeletonSandbox = () => { - } - // style_type="rainbow" - // style_type="norway" - // style_type="shine" - > + }> { {/* - - */} + */} {/*

Paragraph

 */} diff --git a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-norway.scss b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-norway.scss deleted file mode 100644 index 859892b2228..00000000000 --- a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-norway.scss +++ /dev/null @@ -1,72 +0,0 @@ -/* - * Skeleton Theme - * - */ - -@function cross($first, $second, $third) { - @return linear-gradient( - 90deg, - transparent 28%, - $second 28%, - $second 34%, - transparent 34% - ), - linear-gradient( - transparent 42%, - $third 42%, - $third 46%, - $second 46%, - $second 58%, - $third 58%, - $third 62%, - transparent 62% - ), - linear-gradient( - 90deg, - $first 25%, - $third 25%, - $third 28%, - $second 28%, - $second 34%, - $third 34%, - $third 37%, - $first 37% - ); -} - -.dnb-skeleton { - &--norway &--shape, - &--norway#{&}--shape { - &::after { - background-image: cross(#ef2b2d, #002868, white) !important; - - background-repeat: repeat !important; - background-size: 4rem 100% !important; - background-position: center !important; - - animation: skeletonFancyAnimation 5s linear infinite; - } - } - - &--norway &--font, - &--norway#{&}--font { - background-image: cross(#ef2b2d, #002868, white) !important; - } -} - -@keyframes skeletonFancyAnimation { - 0% { - transform: translate3d(-100%, 0, 0); - clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%); - } - - 60% { - transform: translate3d(0%, 0, 0); - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); - } - - 100% { - transform: translate3d(50%, 0, 0); - clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); - } -} diff --git a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-rainbow.scss b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-rainbow.scss deleted file mode 100644 index 31b8bd333aa..00000000000 --- a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-rainbow.scss +++ /dev/null @@ -1,40 +0,0 @@ -/* - * Skeleton Theme - * - */ - -.dnb-skeleton { - --rainbow-skeleton-background: linear-gradient( - to left, - violet, - violet 14%, - indigo 14%, - indigo 28%, - blue 28%, - blue 42%, - green 42%, - green 56%, - yellow 56%, - yellow 70%, - orange 70%, - orange 84%, - red 84%, - red 100% - ); - - &--rainbow &--shape, - &--rainbow#{&}--shape { - &::after { - background-image: var(--rainbow-skeleton-background) !important; - background-repeat: no-repeat !important; - background-size: auto !important; - - animation: skeletonLinearAnimation 5s linear infinite; - } - } - - &--rainbow &--font, - &--rainbow#{&}--font { - background-image: var(--rainbow-skeleton-background) !important; - } -} diff --git a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss index d4fd32aff35..92521812db8 100644 --- a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss @@ -19,10 +19,7 @@ background-color: var(--skeleton-color) !important; // to take presence } - // Lines - &--shape#{&}::after, - &--lines &--shape#{&}::after, - &--lines#{&}--shape#{&}::after { + &--shape#{&}::after { background-image: repeating-linear-gradient( -45deg, var(--skeleton-color--contrast) 1px 2px, @@ -47,7 +44,7 @@ } } - // Font with Lines + // Font &--font, &--font &--show-font, &--font .dnb-p { diff --git a/packages/dnb-eufemia/src/components/skeleton/style/themes/norway.js b/packages/dnb-eufemia/src/components/skeleton/style/themes/norway.js deleted file mode 100644 index e3579a898f1..00000000000 --- a/packages/dnb-eufemia/src/components/skeleton/style/themes/norway.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Imports the Norway theme - * - */ - -import './dnb-skeleton-theme-norway.scss' diff --git a/packages/dnb-eufemia/src/components/skeleton/style/themes/rainbow.js b/packages/dnb-eufemia/src/components/skeleton/style/themes/rainbow.js deleted file mode 100644 index 399ed6c03e9..00000000000 --- a/packages/dnb-eufemia/src/components/skeleton/style/themes/rainbow.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Imports the rainbow theme - * - */ - -import './dnb-skeleton-theme-rainbow.scss' diff --git a/packages/dnb-eufemia/src/elements/stories/OtherElements.stories.tsx b/packages/dnb-eufemia/src/elements/stories/OtherElements.stories.tsx index 9e3b7993e61..9bc5e2c554b 100644 --- a/packages/dnb-eufemia/src/elements/stories/OtherElements.stories.tsx +++ b/packages/dnb-eufemia/src/elements/stories/OtherElements.stories.tsx @@ -273,11 +273,6 @@ export const ElementsAndSkeleton = () => { // no_animation // show // figure={() => } - // style_type="shine" - // style_type="dots" - // style_type="norway" - // style_type="rainbow" - // style_type="brand" >
span span