feat(Skeleton): removes style_type prop (#2095)

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
 

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.                 |

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.
    */

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 {
         ) : (
           <Provider
             skeleton={showSkeleton}
-            skeleton_style_type={style_type}
             skeleton_no_animation={no_animation}
           >
             {children}

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}
 >
   <Space
     bottom={null}

packages/dnb-eufemia/src/components/skeleton/stories/Skeleton.stories.tsx

@@ -38,10 +38,6 @@ import {
 } from '../../../elements'
 import Provider from '../../../shared/Provider'
 
-// Customize
-import '../style/themes/rainbow'
-import '../style/themes/norway'
-import '../style/themes/brand'
 // import SkeletonArticle from '../../skeleton/figures/Article'
 import { Article as SkeletonArticle } from '../figures'
 
@@ -80,11 +76,6 @@ export const SkeletonSandbox = () => {
         // no_animation
         // show
         // figure={() => <SkeletonArticle rows={2} />}
-        // style_type="shine"
-        // style_type="dots"
-        // style_type="norway"
-        // style_type="rainbow"
-        // style_type="brand"
       >
         <CustomStyle>
           <Wrapper>
@@ -301,13 +292,7 @@ export const SkeletonSandbox = () => {
             </Box>
 
             <Box>
-              <Skeleton
-                show
-                figure={() => <SkeletonArticle rows={5} />}
-                // style_type="rainbow"
-                // style_type="norway"
-                // style_type="shine"
-              >
+              <Skeleton show figure={() => <SkeletonArticle rows={5} />}>
                 <Input
                   top
                   label="Input"
@@ -324,12 +309,7 @@ export const SkeletonSandbox = () => {
               {/* <SkeletonFigure top className="dnb-p" width={20} />
                 <SkeletonFigure top figure="article" />
                 <SkeletonFigure top figure="circle" />
-                <SkeletonFigure top figure="product" />
-                <SkeletonFigure
-                  top
-                  figure="product"
-                  className="dnb-skeleton-rainbow"
-                /> */}
+                <SkeletonFigure top figure="product" /> */}
               {/* <Skeleton show top>
                   <P>Paragraph</P>
                 </Skeleton> */}

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 {

packages/dnb-eufemia/src/elements/stories/OtherElements.stories.tsx

@@ -273,11 +273,6 @@ export const ElementsAndSkeleton = () => {
         // no_animation
         // show
         // figure={() => <SkeletonArticle rows={2} />}
-        // style_type="shine"
-        // style_type="dots"
-        // style_type="norway"
-        // style_type="rainbow"
-        // style_type="brand"
       >
         <Hr top="large" bottom />
         <Span>span span</Span>