Sign upLogin

grommet/grommet

View on GitHub
Star
src/js/utils/styles.js

Summary

Maintainability
F
2 wks
Test Coverage

File styles.js has 801 lines of code (exceeds 250 allowed). Consider refactoring.
Open

import { css } from 'styled-components';
import { backgroundStyle } from './background';
import { normalizeColor } from './colors';
import { getBreakpointStyle } from './responsive';
import { breakpointStyle, parseMetricToNum } from './mixins';
Severity: Major
Found in src/js/utils/styles.js - About 1 day to fix

    Function edgeStyle has a Cognitive Complexity of 56 (exceeds 5 allowed). Consider refactoring.
    Open

    export const edgeStyle = (
  kind,
  data,
  responsive,
  responsiveBreakpoint,
    Severity: Minor
    Found in src/js/utils/styles.js - About 1 day to fix

    Cognitive Complexity

    Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

    A method's cognitive complexity is based on a few simple rules:

    • Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
    • Code is considered more complex for each "break in the linear flow of the code"
    • Code is considered more complex when "flow breaking structures are nested"

    Further reading

    Function edgeStyle has 146 lines of code (exceeds 25 allowed). Consider refactoring.
    Open

    export const edgeStyle = (
  kind,
  data,
  responsive,
  responsiveBreakpoint,
    Severity: Major
    Found in src/js/utils/styles.js - About 5 hrs to fix

      Function roundStyle has a Cognitive Complexity of 35 (exceeds 5 allowed). Consider refactoring.
      Open

      export const roundStyle = (data, responsive, theme) => {
  const breakpoint = getBreakpointStyle(theme, theme.box.responsiveBreakpoint);
  const styles = [];
  if (typeof data === 'object') {
    const size =
      Severity: Minor
      Found in src/js/utils/styles.js - About 5 hrs to fix

      Cognitive Complexity

      Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

      A method's cognitive complexity is based on a few simple rules:

      • Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
      • Code is considered more complex for each "break in the linear flow of the code"
      • Code is considered more complex when "flow breaking structures are nested"

      Further reading

      Function roundStyle has 124 lines of code (exceeds 25 allowed). Consider refactoring.
      Open

      export const roundStyle = (data, responsive, theme) => {
  const breakpoint = getBreakpointStyle(theme, theme.box.responsiveBreakpoint);
  const styles = [];
  if (typeof data === 'object') {
    const size =
      Severity: Major
      Found in src/js/utils/styles.js - About 4 hrs to fix

        Function kindPartStyles has a Cognitive Complexity of 31 (exceeds 5 allowed). Consider refactoring.
        Open

        export const kindPartStyles = (obj, theme, colorValue) => {
  const styles = [];
  if (obj.padding || obj.pad) {
    // button uses `padding` but other components use Grommet `pad`
    const pad = obj.padding || obj.pad;
        Severity: Minor
        Found in src/js/utils/styles.js - About 4 hrs to fix

        Cognitive Complexity

        Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

        A method's cognitive complexity is based on a few simple rules:

        • Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
        • Code is considered more complex for each "break in the linear flow of the code"
        • Code is considered more complex when "flow breaking structures are nested"

        Further reading

        Function kindPartStyles has 67 lines of code (exceeds 25 allowed). Consider refactoring.
        Open

        export const kindPartStyles = (obj, theme, colorValue) => {
  const styles = [];
  if (obj.padding || obj.pad) {
    // button uses `padding` but other components use Grommet `pad`
    const pad = obj.padding || obj.pad;
        Severity: Major
        Found in src/js/utils/styles.js - About 2 hrs to fix

          Consider simplifying this complex logical expression.
          Open

            if (typeof data === 'object') {
    const size =
      ROUND_MAP[data.size] ||
      theme.global.edgeSize[data.size || 'medium'] ||
      data.size;
          Severity: Critical
          Found in src/js/utils/styles.js - About 2 hrs to fix

            Function focusStyles has a Cognitive Complexity of 16 (exceeds 5 allowed). Consider refactoring.
            Open

            const focusStyles = (props, { forceOutline, justBorder } = {}) => {
  const {
    theme: {
      global: { focus },
    },
            Severity: Minor
            Found in src/js/utils/styles.js - About 2 hrs to fix

            Cognitive Complexity

            Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

            A method's cognitive complexity is based on a few simple rules:

            • Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
            • Code is considered more complex for each "break in the linear flow of the code"
            • Code is considered more complex when "flow breaking structures are nested"

            Further reading

            Function unfocusStyles has a Cognitive Complexity of 14 (exceeds 5 allowed). Consider refactoring.
            Open

            const unfocusStyles = (props, { forceOutline, justBorder } = {}) => {
  const {
    theme: {
      global: { focus },
    },
            Severity: Minor
            Found in src/js/utils/styles.js - About 1 hr to fix

            Cognitive Complexity

            Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

            A method's cognitive complexity is based on a few simple rules:

            • Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
            • Code is considered more complex for each "break in the linear flow of the code"
            • Code is considered more complex when "flow breaking structures are nested"

            Further reading

            Consider simplifying this complex logical expression.
            Open

                if (pad.vertical || pad.horizontal)
      styles.push(
        `padding: ${theme.global.edgeSize[pad.vertical] || pad.vertical || 0} ${
          theme.global.edgeSize[pad.horizontal] || pad.horizontal || 0
        };`,
            Severity: Critical
            Found in src/js/utils/styles.js - About 1 hr to fix

              Function heightObjectStyle has 26 lines of code (exceeds 25 allowed). Consider refactoring.
              Open

              const heightObjectStyle = (height, theme) => {
  const result = [];
  if (height.max)
    result.push(
      css`
              Severity: Minor
              Found in src/js/utils/styles.js - About 1 hr to fix

                Avoid deeply nested control flow statements.
                Open

                      if (responsiveSize) {
        styles.push(
          breakpointStyle(
            breakpoint,
            `
                Severity: Major
                Found in src/js/utils/styles.js - About 45 mins to fix

                  Avoid deeply nested control flow statements.
                  Open

                      } else if (data.corner === 'right') {
      styles.push(css`
        border-top-right-radius: ${size};
        border-bottom-right-radius: ${size};
      `);
                  Severity: Major
                  Found in src/js/utils/styles.js - About 45 mins to fix

                    Consider simplifying this complex logical expression.
                    Open

                      if (horizontal) {
    result.push(css`
      ${kind}-left: ${theme.global.edgeSize[horizontal] || horizontal};
      ${kind}-right: ${theme.global.edgeSize[horizontal] || horizontal};
      ${responsive && breakpoint
                    Severity: Major
                    Found in src/js/utils/styles.js - About 40 mins to fix

                      Consider simplifying this complex logical expression.
                      Open

                        if (vertical) {
    result.push(css`
      ${kind}-top: ${theme.global.edgeSize[vertical] || vertical};
      ${kind}-bottom: ${theme.global.edgeSize[vertical] || vertical};
      ${responsive && breakpoint
                      Severity: Major
                      Found in src/js/utils/styles.js - About 40 mins to fix

                        Avoid too many return statements within this function.
                        Open

                          return ''; // defensive
                        Severity: Major
                        Found in src/js/utils/styles.js - About 30 mins to fix

                          Avoid too many return statements within this function.
                          Open

                              return `
      outline: none;
      border-color: ${color};
    `;
                          Severity: Major
                          Found in src/js/utils/styles.js - About 30 mins to fix

                            Avoid too many return statements within this function.
                            Open

                                return `
      outline: none;
      border-color: none;
    `;
                            Severity: Major
                            Found in src/js/utils/styles.js - About 30 mins to fix

                              Avoid too many return statements within this function.
                              Open

                                    return `
        outline: none;
        box-shadow: 0 0 ${size} ${size} ${color};
      `;
                              Severity: Major
                              Found in src/js/utils/styles.js - About 30 mins to fix

                                Avoid too many return statements within this function.
                                Open

                                  return ''; // defensive
                                Severity: Major
                                Found in src/js/utils/styles.js - About 30 mins to fix

                                  Avoid too many return statements within this function.
                                  Open

                                      return `
      outline: none;
      box-shadow: ${focus.shadow};
    `;
                                  Severity: Major
                                  Found in src/js/utils/styles.js - About 30 mins to fix

                                    Avoid too many return statements within this function.
                                    Open

                                          return `
        outline: none;
        box-shadow: none;
      `;
                                    Severity: Major
                                    Found in src/js/utils/styles.js - About 30 mins to fix

                                      Avoid too many return statements within this function.
                                      Open

                                          return `
      outline: none;
      box-shadow: none;
    `;
                                      Severity: Major
                                      Found in src/js/utils/styles.js - About 30 mins to fix

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                          if (horizontal) {
    result.push(css`
      ${kind}-left: ${theme.global.edgeSize[horizontal] || horizontal};
      ${kind}-right: ${theme.global.edgeSize[horizontal] || horizontal};
      ${responsive && breakpoint
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 5 hrs to fix
                                        src/js/utils/styles.js on lines 104..118

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 139.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                          if (vertical) {
    result.push(css`
      ${kind}-top: ${theme.global.edgeSize[vertical] || vertical};
      ${kind}-bottom: ${theme.global.edgeSize[vertical] || vertical};
      ${responsive && breakpoint
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 5 hrs to fix
                                        src/js/utils/styles.js on lines 89..103

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 139.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                          if (data.start) {
    result.push(css`
      ${kind}-inline-start: ${theme.global.edgeSize[data.start] || data.start};
      ${responsive && breakpoint
        ? breakpointStyle(
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 4 hrs to fix
                                        src/js/utils/styles.js on lines 186..198

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 115.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                          if (data.end) {
    result.push(css`
      ${kind}-inline-end: ${theme.global.edgeSize[data.end] || data.end};
      ${responsive && breakpoint
        ? breakpointStyle(
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 4 hrs to fix
                                        src/js/utils/styles.js on lines 171..185

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 115.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                        export const unfocusStyle = ({
  forceOutline,
  justBorder,
  skipSvgChildren,
} = {}) => css`
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 3 hrs to fix
                                        src/js/utils/styles.js on lines 312..336

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 108.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                        export const focusStyle = ({
  forceOutline,
  justBorder,
  skipSvgChildren,
} = {}) => css`
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 3 hrs to fix
                                        src/js/utils/styles.js on lines 344..368

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 108.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 4 locations. Consider refactoring.
                                        Open

                                          if (left) {
    result.push(css`
      ${kind}-left: ${theme.global.edgeSize[left] || left};
      ${responsive && breakpoint
        ? breakpointStyle(
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 3 other locations - About 3 hrs to fix
                                        src/js/utils/styles.js on lines 119..131
                                        src/js/utils/styles.js on lines 132..144
                                        src/js/utils/styles.js on lines 158..170

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 95.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 4 locations. Consider refactoring.
                                        Open

                                          if (bottom) {
    result.push(css`
      ${kind}-bottom: ${theme.global.edgeSize[bottom] || bottom};
      ${responsive && breakpoint
        ? breakpointStyle(
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 3 other locations - About 3 hrs to fix
                                        src/js/utils/styles.js on lines 119..131
                                        src/js/utils/styles.js on lines 145..157
                                        src/js/utils/styles.js on lines 158..170

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 95.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 4 locations. Consider refactoring.
                                        Open

                                          if (top) {
    result.push(css`
      ${kind}-top: ${theme.global.edgeSize[top] || top};
      ${responsive && breakpoint
        ? breakpointStyle(
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 3 other locations - About 3 hrs to fix
                                        src/js/utils/styles.js on lines 132..144
                                        src/js/utils/styles.js on lines 145..157
                                        src/js/utils/styles.js on lines 158..170

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 95.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 4 locations. Consider refactoring.
                                        Open

                                          if (right) {
    result.push(css`
      ${kind}-right: ${theme.global.edgeSize[right] || right};
      ${responsive && breakpoint
        ? breakpointStyle(
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 3 other locations - About 3 hrs to fix
                                        src/js/utils/styles.js on lines 119..131
                                        src/js/utils/styles.js on lines 132..144
                                        src/js/utils/styles.js on lines 145..157

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 95.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                            return css`
      ${kind}: ${theme.global.edgeSize[data] || data};
      ${responsive && breakpoint
        ? breakpointStyle(
            breakpoint,
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 2 hrs to fix
                                        src/js/utils/styles.js on lines 76..86

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 80.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                            return css`
      ${kind}: ${theme.global.edgeSize[value] || value};
      ${responsive && breakpoint
        ? breakpointStyle(
            breakpoint,
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 2 hrs to fix
                                        src/js/utils/styles.js on lines 48..58

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 80.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 4 locations. Consider refactoring.
                                        Open

                                            if (data.corner === 'top') {
      styles.push(css`
        border-top-left-radius: ${size};
        border-top-right-radius: ${size};
      `);
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 3 other locations - About 1 hr to fix
                                        src/js/utils/styles.js on lines 683..759
                                        src/js/utils/styles.js on lines 699..759
                                        src/js/utils/styles.js on lines 715..759

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 68.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 4 locations. Consider refactoring.
                                        Open

                                            } else if (data.corner === 'left') {
      styles.push(css`
        border-top-left-radius: ${size};
        border-bottom-left-radius: ${size};
      `);
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 3 other locations - About 1 hr to fix
                                        src/js/utils/styles.js on lines 667..759
                                        src/js/utils/styles.js on lines 683..759
                                        src/js/utils/styles.js on lines 715..759

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 68.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 4 locations. Consider refactoring.
                                        Open

                                            } else if (data.corner === 'right') {
      styles.push(css`
        border-top-right-radius: ${size};
        border-bottom-right-radius: ${size};
      `);
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 3 other locations - About 1 hr to fix
                                        src/js/utils/styles.js on lines 667..759
                                        src/js/utils/styles.js on lines 683..759
                                        src/js/utils/styles.js on lines 699..759

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 68.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 4 locations. Consider refactoring.
                                        Open

                                            } else if (data.corner === 'bottom') {
      styles.push(css`
        border-bottom-left-radius: ${size};
        border-bottom-right-radius: ${size};
      `);
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 3 other locations - About 1 hr to fix
                                        src/js/utils/styles.js on lines 667..759
                                        src/js/utils/styles.js on lines 699..759
                                        src/js/utils/styles.js on lines 715..759

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 68.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                          if (focus.shadow && (!focus.border || !justBorder)) {
    if (typeof focus.shadow === 'object') {
      return `
        outline: none;
        box-shadow: none;
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 1 hr to fix
                                        src/js/utils/styles.js on lines 281..289

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 60.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                          if (focus.outline && (!focus.border || !justBorder)) {
    if (typeof focus.outline === 'object') {
      return `
        outline-offset: 0px;
        outline: none;
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 1 other location - About 1 hr to fix
                                        src/js/utils/styles.js on lines 290..301

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 60.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 3 locations. Consider refactoring.
                                        Open

                                        export const fillStyle = (fillProp) => {
  if (fillProp === 'horizontal') {
    return 'width: 100%;';
  }
  if (fillProp === 'vertical') {
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 2 other locations - About 1 hr to fix
                                        src/js/components/Button/StyledButton.js on lines 118..134
                                        src/js/components/Button/StyledButtonKind.js on lines 218..234

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 59.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 3 locations. Consider refactoring.
                                        Open

                                              obj.opacity === true
        ? theme.global.opacity.medium
        : theme.global.opacity[obj.opacity] || obj.opacity;
                                        Severity: Major
                                        Found in src/js/utils/styles.js and 2 other locations - About 50 mins to fix
                                        src/js/components/Meter/utils.js on lines 10..12
                                        src/js/utils/background.js on lines 261..263

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 51.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        Similar blocks of code found in 2 locations. Consider refactoring.
                                        Open

                                          ${(props) =>
    props.theme.global.font.variant &&
    `
    font-variant:${props.theme.global.font.variant};
  `}
                                        Severity: Minor
                                        Found in src/js/utils/styles.js and 1 other location - About 45 mins to fix
                                        src/js/components/Layer/StyledLayer.js on lines 77..79

                                        Duplicated Code

                                        Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

                                        Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

                                        When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

                                        Tuning

                                        This issue has a mass of 50.

                                        We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

                                        The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

                                        If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

                                        See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

                                        Refactorings

                                        Further Reading

                                        There are no issues that match your filters.

                                        Category
                                        Status